<template>
  <div class="home">
      <navigation></navigation>
    
    <div class="container">
      <h2>{{title}}</h2>
      <p class="sourse">来源: {{source}} <span class="time">{{time()}}</span></p>
      <p class="detail">{{detail}}</p>
    </div>
    <div class="collection">
      <i @click="collect()" :class="[collectStatus?'icon-love':'icon-aixin']" class="iconfont"></i>
    </div>
  </div>
</template>

<script>

import newsList from '../components/newsList'
import navigation from '../components/head'


export default {
  name: 'newsDetail',
  components: {
    newsList,
    navigation
  },
  data() {
    return {
      collectStatus:'',
      title:'',
      source:'',
      className:'',
      detail:'',
      newId:'',
      postTime:''
    }
  },
  created() {
    this.newId = this.$route.query.item;
    var token = localStorage.getItem('token')

    //新闻详情
    this.$axios({
      method:'post',
      url:'/news',
      data:{
        newId:this.newId,
      }
    }).then(res=>{
      this.title=res.data.data.title
      this.className=res.data.data.className
      this.detail=res.data.data.content
      this.postTime=res.data.data.postTime
      this.source=res.data.data.source
    })

    // 查看收藏状态
    this.$axios({
      method:'post',
      url:'/collected',
      data:{
        token:token,
        newId:this.newId,
        type:1
      }
    }).then(res=>{
      if(res.data.status=='success' && res.data.msg=='已收藏'){
        this.collectStatus = true
      }else{
        this.collectStatus = false
      }
    }).catch(err=>{
      console.log(err)

    })
  },
  methods: {
    back(){
      this.$router.go(-1)
    },
    //处理时间
    time(){
      var time = this.postTime;
      var timeStamp = parseInt(time)
      var year = new Date(timeStamp).getFullYear()
      var month = new Date(timeStamp).getMonth()+1
      var day = new Date(timeStamp).getDate()
      return `${year}-${month}-${day}`
    },

    //点击收藏
    collect(){
      var token = localStorage.getItem('token')
      if(token){
        this.$axios({
          method:'post',
          url:'/collected',
          data:{
            token:token,
            newId:this.newId,
            type:2,
          }
        }).then(res=>{
          console.log(res)
          if(res.data.status == 'success'){
            this.collectStatus = res.data.data.isCollect
            this.$weui.toast(res.data.msg,{
              duration:2000,
              className:'custom-toast'
            })
          }
        })
      }else{
        this.$router.push({name:'login'})
      }
    }
  },
}
</script>
<style scoped>

  .header{
    width: 100%;
    background: crimson;
  }
  header{
    display: flex;
    justify-content: space-between;
    width: 90%;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
  }
  header .back{
    font-size: 35px;
    display: flex;
  }
  header .back i {
    color: white;
    font-size: 22px;
  }
  header .back p{
    color: white;
    font-size: 18px;
    margin-left: 10px;
  }

  .container{
    padding: 10px 10px;
  }
  .container h2{
    font-size: 24px;
    letter-spacing: 1px;
    line-height: 32px;
    color: #222222;
    font-weight: bold;
  }
  .container .sourse{
    margin: 10px 0;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 32px;
    color: #222222;
  }
  .container .time{
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 32px;
    color: #a5a5a5;
  }
  .container .detail{
    letter-spacing: 1px;
    font-size: 16px;
    line-height: 20px;
    color: #222222;
  }
  .collection{
    margin-right: 20px;
    text-align: right;
  }
  .collection i{
    font-size: 30px;
  }
  .collection .icon-love{
    color:red
  }

</style>
